//商品列表数据变量名
var arr = [];

//购物车存放数据的变量名
var cartArr = [];

//页面加载完成后执行
window.onload = function() {
        //将arr里存放的商品列表的数据渲染到页面 
        showGoodsList(getLocalGoodsListData());

        //将本地的购物车数据渲染显示到页面table
        render(getLocalCartData());
    }
    //  数据渲染
function showGoodsList(arr) {

    // 获取ul标签的元素节点
    var listUl = document.querySelector(".listUl");
    listUl.innerHTML = "";

    //通过循环，和dom 操作，将每个li,都显示到
    for (var i = 0; i < arr.length; i++) {
        listUl.innerHTML += ` <li data-id="${ arr[i].goodsid}">
        <img src="${ arr[i].image}" alt=""><br>
        <span>	${arr[i].name}</span><br>
        <b>${ arr[i].price }元</b><br>
        <button type="button" class="btn_add mt5" onclick='addCart("${ arr[i].goodsid }","${ arr[i].image }","${ arr[i].name }","${ arr[i].price }")'>
    		加入购物车
	    </button>
    </li>`
    }
}

function addCart(goodsId, img, goodsName, price) {
    //默认点击添加购物车，默认是加1
    var count = 1;

    //商品的小计，价格*数量
    var xiaoji = price / 1 * count;

    //所有需要的信息 存放到对象里
    var obj = {
        id: goodsId,
        src: img,
        title: goodsName,
        price: price,
        count: count,
        xiaoji: xiaoji.toFixed(2),
        time: new Date().toLocaleTimeString()
    }
    addData(obj);
}
//  添加数据到购物车并渲染
function addData(obj) {
    cartArr = getLocalCartData();
    var result = cartArr.some(function(item, index) {
        return item.id === obj.id
    })
    if (result) {
        plus(obj.id);
        return;
    }
    cartArr.push(obj);
    localStorage.cartArr = JSON.stringify(cartArr);
    render(cartArr);
}
//  渲染cartArr到购物车列表
function render(cartArr) {
    var tbody = document.querySelector('tbody');
    tbody.innerHTML = "";
    var str = "";
    var sum = 0;
    for (var i = 0; i < cartArr.length; i++) {
        str += `
             <tr>
                <td>
                <input type="checkbox" name="" id="" value=""  class="danxuan" data-id="${ cartArr[i].id }"/>
                </td>
                <td>
                    <img src="${ cartArr[i].src }"" alt="">
                    <br><span>${ cartArr[i].title }</span>
                </td>
                <td>
                    <span type="button" onclick="minus(${ cartArr[i].id })">-</span>
                    <input type="text" value="${ cartArr[i].count }">
                    <span type="button" onclick="plus(${ cartArr[i].id })">+</span>
                </td>
                <td>${ cartArr[i].price }元</td>
                <td>${ cartArr[i].xiaoji }</td>
                <td><button type="button" onclick="del(${ cartArr[i].id })">删除</button></td>
                <td>${ cartArr[i].time }</td>
            </tr>

        `
        sum = sum / 1 + cartArr[i].xiaoji / 1
    }
    tbody.innerHTML = str;
    document.getElementById("sum").innerHTML = sum;
}
// 获取本地购物车数据
function getLocalCartData() {
    //三目运算的写法
    cartArr = localStorage.cartArr ? JSON.parse(localStorage.cartArr) : [];
    return cartArr;
}
//   获取本地的商品列表的数据
function getLocalGoodsListData() {
    arr = localStorage.dataObj ? JSON.parse(localStorage.dataObj) : [];
    return arr;
}
//  点击-的业务逻辑
function minus(id) {
    console.log("id:", id);
    //本地获取数据赋值给到cartArr
    cartArr = getLocalCartData();
    cartArr.forEach(function(item, index) {
        if (item.id == id) {
            if (item.count > 1) {
                item.count--;
                item.xiaoji = (item.count * item.price).toFixed(2);
            }
        }
    })
    localStorage.cartArr = JSON.stringify(cartArr);
    render(cartArr);
}
//  点击+号的业务逻辑，

function plus(id) {
    console.log(id);
    cartArr = getLocalCartData();
    cartArr.forEach(function(item, index) {
        if (item.id == id) {
            item.count++;
            item.xiaoji = (item.count * item.price).toFixed(2);
        }
    });
    //本地数据的更新
    localStorage.cartArr = JSON.stringify(cartArr);
    //本地数据发生变化后，页面也要重新渲染
    render(cartArr);
}
//   点击删除按钮，根据点击的商品的id,删除商品，并重新渲染
function del(id) {

    cartArr = getLocalCartData();

    cartArr = cartArr.filter(function(item, index) {
        return item.id != id
    })
    localStorage.cartArr = JSON.stringify(cartArr);
    render(getLocalCartData());
}
//  全选的功能

var quanxuan = document.querySelector(".quanxuan");
quanxuan.onclick = function() {
    var danxuanList = document.querySelectorAll(".danxuan");
    for (let index = 0; index < danxuanList.length; index++) {
        danxuanList[index].checked = quanxuan.checked;
    }
}


var delChecked = document.getElementById("delChecked");
delChecked.onclick = function() {

    cartArr = getLocalCartData();
    var danxuanList = document.querySelectorAll(".danxuan:checked");
    for (let i = 0; i < danxuanList.length; i++) {

        cartArr.forEach(function(item, index) {
            if (item.id === danxuanList[i].getAttribute("data-id")) {
                cartArr.splice(index, 1)
            }
        })
    }
    localStorage.cartArr = JSON.stringify(cartArr);
    render(getLocalCartData());
}